<template>
  <view class="valueCard">
    <view class="head-module">

      <u-grid v-if="routerHeads.length > 0" col="3">
        <u-grid-item v-for="(item, index) in routerHeads" :key="index" @click="tabClick(item.link)">
          <image class="grid-img" :src="item.icon" />
          <text class="grid-title-head">{{ item.name }}</text>
        </u-grid-item>
      </u-grid>

      <view class="balance">
        <text v-if="balance=='0.0'">...</text>
        <view v-else>
          ¥<u-count-to start-val="0" :end-val="balance" separator="," color="#fff" font-size="18" />
        </view>

      </view>
    </view>

    <u-gap height="40rpx" />

    <u-grid v-if="routers.length > 0" col="3">
      <u-grid-item v-for="(item, index) in routers" :key="index" @click="tabClick(item.link)">
        <image class="grid-img" :src="item.icon" />
        <text class="grid-title">{{ item.name }}</text>
      </u-grid-item>
    </u-grid>
  </view>
</template>
<script>
import { appSettingList, userPointsBalanceValueBalance } from '@/api/api1'

export default {
  components: {},
  data() {
    return {
      balance: '0.0',
      routers: [],
      routerHeads: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  onLoad() {
  },
  onShow() {
    this.initMenu()
    if (this.hasLoginAndHasMallInfo) {
      this.getPoint()
    }
  },
  onPullDownRefresh() {
    this.initMenu()
    if (this.hasLoginAndHasMallInfo) {
      this.getPoint()
    }
  },

  methods: {
    tabClick(e) {
      if (e) {
        console.log(e)
        uni.$u.route(e)
      }
    },
    initMenu() {
      appSettingList({ type: 7, status: true }).then(res => {
        this.routers = res.data
      })
      appSettingList({ type: 8, status: true }).then(res => {
        this.routerHeads = res.data
      })
    },
    getPoint() {
      const that = this
      userPointsBalanceValueBalance(
        { cardNo: this.userInfo.cardNo }
      ).then(res => {
        that.balance = 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.head-module {
  @include flex-center(column);
  background: linear-gradient(180deg, #352d1c 7%, #2b2b2b);
  height: 248rpx;
}

.balance {
  font-size: 28rpx;
  color: #ffffff;
}

.grid-img {
  width: 80rpx;
  height: 80rpx;
}

.grid-title-head {
  line-height: 60rpx;
  color: #ffffff;
  font-size: 26rpx;
}

.grid-title {
  line-height: 50rpx;
  color: #646464;
  font-size: 24rpx;
  padding: 10rpx 0 20rpx 0rpx;
}
</style>
